<template>
	<view class="Search">
		<view class="natTop_Search">
			<uni-icons type="left" size="25" color="#9d9d9d" @click="goBack()"></uni-icons>
			<u-search placeholder="输入商品名称搜索" border-color="#88A58A" height="40" :focus="true" :show-action="false"
				v-model="keyword" @search="getSearch()">
			</u-search>
		</view>
		<view class="Search_history" v-if="searchHistoryList.length >= 1">
			<view class="Search_title">
				<view class="Search_title_name">
					历史搜索
				</view>
				<view class="Search_title_icon" @click="clearHistory()">
					<uni-icons type="trash" size="25"></uni-icons>
				</view>
			</view>
			<view class="Search_content">
				<view class="Search_content_title" v-for="(item,index) in searchHistoryList" :key="index"
					@click="iconClick(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				searchHistoryList: []
			}
		},
		methods: {
			clearHistory() {
				uni.showToast({
					title: '已清空'
				});
				uni.removeStorage({
					key: 'searchList'
				});
				this.searchHistoryList = [];
			},
			getSearch() {
				if (this.keyword == '') {
					uni.navigateTo({
						url: '../search-show/search-show'
					})
				} else {
					if (this.searchHistoryList.includes(this.keyword)) {
						let i = this.searchHistoryList.indexOf(this.keyword)
						this.searchHistoryList.splice(i, 1);
						this.searchHistoryList.unshift(this.keyword)
					} else {
						this.searchHistoryList.unshift(this.keyword)
						uni.setStorageSync('searchList', JSON.stringify(this.searchHistoryList))
					}
				}
				uni.navigateTo({
					url: '../search-show/search-show?value=' + this.keyword
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			iconClick(item) {
				uni.navigateTo({
					url: '../search-show/search-show?value=' + item
				})
			},
		},
		onShow() {
			this.searchHistoryList = JSON.parse(uni.getStorageSync('searchList') || '[]')
		}
	}
</script>

<style scoped>
	@import './goods-search.css';
</style>
